<template lang="pug">
svg(:class='svgClass' aria-hidden='true' :style="style")
  use(:xlink:href='iconName' :fill="color")
</template>

<script setup>
import {computed} from "vue"

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'currentColor'
  },
  size: {
    type: [String, Number],
    default: 20
  }
})

const svgClass = computed(() => {
  const classList = []
  if (props.icon) {
    classList.push('iconfont')
  }
  if (props.size) {
    classList.push(`icon-${props.size}`)
  }
  return classList.join(' ')
})

const style = computed(() => {
  return {
    fontSize: !isNaN(props.size) ? `${props.size}px` : ''
  }
})

const iconName = computed(() => {
  return `#icon${props.icon}`
})

</script>

<style lang="scss" scoped>

.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.iconfont {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  color: #9696A0;
  overflow: hidden;
  font-size: 16px;
  transition: color 0.3s;

  &.icon-sm {
    font-size: 12px;
  }

  &.icon-lg {
    font-size: 20px;
  }

  &[disabled] {
    color: #C8C8D2;
  }
}
</style>